<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>批发端行情</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.wholesale-container {
			padding: 20px;
			max-width: 1400px;
			margin: 0 auto;
		}
		.page-title {
			margin-bottom: 25px;
		}
		.page-title h2 {
			margin: 0 0 8px 0;
			color: #333;
			font-size: 24px;
		}
		.page-title p {
			margin: 0;
			color: #666;
			font-size: 14px;
		}
		
		/* 统计卡片 */
		.stats-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 20px;
			margin-bottom: 25px;
		}
		.stat-card {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 12px;
			padding: 25px;
			text-align: center;
			box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
		}
		.stat-icon {
			font-size: 36px;
			margin-bottom: 15px;
			opacity: 0.9;
		}
		.stat-value {
			font-size: 28px;
			font-weight: bold;
			margin-bottom: 8px;
		}
		.stat-label {
			font-size: 14px;
			opacity: 0.8;
		}
		.stat-change {
			font-size: 12px;
			margin-top: 8px;
		}
		.change-up {
			color: #ff9999;
		}
		.change-down {
			color: #99ff99;
		}
		
		/* 内容网格 */
		.content-grid {
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: 25px;
			margin-bottom: 25px;
		}
		.content-left {
			display: flex;
			flex-direction: column;
			gap: 25px;
		}
		.content-right {
			display: flex;
			flex-direction: column;
			gap: 25px;
		}
		
		/* 通用卡片 */
		.market-card {
			background: #fff;
			border-radius: 12px;
			padding: 25px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.08);
		}
		.card-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		
		/* 价格指数表格 */
		.price-table {
			width: 100%;
			border-collapse: collapse;
		}
		.price-table th,
		.price-table td {
			padding: 12px;
			text-align: left;
			border-bottom: 1px solid #f0f2f5;
		}
		.price-table th {
			background: #fafafa;
			font-weight: 600;
			color: #333;
		}
		.price-table tbody tr:hover {
			background: #f8f9fa;
		}
		.price-trend {
			display: flex;
			align-items: center;
			gap: 5px;
		}
		.trend-up {
			color: #e74c3c;
		}
		.trend-down {
			color: #27ae60;
		}
		.trend-stable {
			color: #95a5a6;
		}
		
		/* 图表容器 */
		.chart-container {
			height: 300px;
			margin-top: 15px;
		}
		
		/* 快讯列表 */
		.news-list {
			max-height: 400px;
			overflow-y: auto;
		}
		.news-item {
			padding: 15px;
			border-bottom: 1px solid #f0f2f5;
			transition: background-color 0.2s;
		}
		.news-item:hover {
			background: #f8f9fa;
		}
		.news-item:last-child {
			border-bottom: none;
		}
		.news-title {
			font-weight: 500;
			color: #333;
			margin-bottom: 8px;
			line-height: 1.4;
		}
		.news-meta {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 12px;
			color: #999;
		}
		.news-tag {
			background: #f0f9ff;
			color: #1890ff;
			padding: 2px 6px;
			border-radius: 4px;
			font-size: 11px;
		}
		
		/* 数据指标 */
		.indicator-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 15px;
		}
		.indicator-item {
			padding: 15px;
			background: #f8f9fa;
			border-radius: 8px;
			border-left: 4px solid #667eea;
		}
		.indicator-label {
			font-size: 14px;
			color: #666;
			margin-bottom: 8px;
		}
		.indicator-value {
			font-size: 20px;
			font-weight: bold;
			color: #333;
		}
		.indicator-change {
			font-size: 12px;
			margin-top: 4px;
		}
		
		/* 响应式设计 */
		@media (max-width: 1200px) {
			.content-grid {
				grid-template-columns: 1fr;
			}
			.stats-grid {
				grid-template-columns: repeat(2, 1fr);
			}
		}
		@media (max-width: 768px) {
			.stats-grid {
				grid-template-columns: 1fr;
			}
			.indicator-grid {
				grid-template-columns: 1fr;
			}
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="wholesale-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>批发端行情</h2>
				<p>大宗生鲜、冻品批发价格指数与市场动态</p>
			</div>

			<!-- 统计卡片 -->
			<div class="stats-grid">
				<div class="stat-card">
					<div class="stat-icon">📈</div>
					<div class="stat-value">{{marketStats.priceIndex}}</div>
					<div class="stat-label">综合价格指数</div>
					<div class="stat-change" :class="marketStats.priceChange > 0 ? 'change-up' : 'change-down'">
						{{marketStats.priceChange > 0 ? '↗' : '↘'}} {{Math.abs(marketStats.priceChange)}}%
					</div>
				</div>
				<div class="stat-card">
					<div class="stat-icon">🏪</div>
					<div class="stat-value">{{marketStats.activeMarkets}}</div>
					<div class="stat-label">活跃批发市场</div>
					<div class="stat-change change-up">↗ {{marketStats.marketGrowth}}%</div>
				</div>
				<div class="stat-card">
					<div class="stat-icon">📦</div>
					<div class="stat-value">{{marketStats.dailyVolume}}</div>
					<div class="stat-label">日交易量(吨)</div>
					<div class="stat-change" :class="marketStats.volumeChange > 0 ? 'change-up' : 'change-down'">
						{{marketStats.volumeChange > 0 ? '↗' : '↘'}} {{Math.abs(marketStats.volumeChange)}}%
					</div>
				</div>
				<div class="stat-card">
					<div class="stat-icon">💰</div>
					<div class="stat-value">{{marketStats.avgPrice}}</div>
					<div class="stat-label">平均批发价(元/公斤)</div>
					<div class="stat-change" :class="marketStats.avgPriceChange > 0 ? 'change-up' : 'change-down'">
						{{marketStats.avgPriceChange > 0 ? '↗' : '↘'}} {{Math.abs(marketStats.avgPriceChange)}}%
					</div>
				</div>
			</div>

			<!-- 主要内容 -->
			<div class="content-grid">
				<!-- 左侧内容 -->
				<div class="content-left">
					<!-- 价格指数表 -->
					<div class="market-card">
						<div class="card-title">
							<i class="el-icon-data-board"></i>
							大宗商品价格指数
						</div>
						<table class="price-table">
							<thead>
								<tr>
									<th>商品类别</th>
									<th>当前指数</th>
									<th>日变化</th>
									<th>周变化</th>
									<th>趋势</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="item in priceIndexes" :key="item.category">
									<td>{{item.category}}</td>
									<td><strong>{{item.index}}</strong></td>
									<td :class="'trend-' + item.dailyTrend.type">{{item.dailyChange}}</td>
									<td :class="'trend-' + item.weeklyTrend.type">{{item.weeklyChange}}</td>
									<td>
										<div class="price-trend">
											<i :class="'el-icon-caret-' + (item.dailyTrend.type === 'up' ? 'top' : item.dailyTrend.type === 'down' ? 'bottom' : 'right')"
												:style="'color: ' + (item.dailyTrend.type === 'up' ? '#e74c3c' : item.dailyTrend.type === 'down' ? '#27ae60' : '#95a5a6')"></i>
											<span>{{item.dailyTrend.text}}</span>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

					<!-- 价格走势图 -->
					<div class="market-card">
						<div class="card-title">
							<i class="el-icon-trending-up"></i>
							批发价格走势图
						</div>
						<div class="chart-container" id="priceChart"></div>
					</div>

					<!-- 成交量分析 -->
					<div class="market-card">
						<div class="card-title">
							<i class="el-icon-pie-chart"></i>
							成交量分析
						</div>
						<div class="chart-container" id="volumeChart"></div>
					</div>
				</div>

				<!-- 右侧内容 -->
				<div class="content-right">
					<!-- 关键指标 -->
					<div class="market-card">
						<div class="card-title">
							<i class="el-icon-data-analysis"></i>
							关键市场指标
						</div>
						<div class="indicator-grid">
							<div class="indicator-item">
								<div class="indicator-label">活跃供应商</div>
								<div class="indicator-value">{{indicators.suppliers}}</div>
								<div class="indicator-change change-up">+{{indicators.supplierGrowth}}%</div>
							</div>
							<div class="indicator-item">
								<div class="indicator-label">新增货源</div>
								<div class="indicator-value">{{indicators.newSources}}</div>
								<div class="indicator-change change-up">+{{indicators.sourceGrowth}}%</div>
							</div>
							<div class="indicator-item">
								<div class="indicator-label">库存周转率</div>
								<div class="indicator-value">{{indicators.turnoverRate}}</div>
								<div class="indicator-change" :class="indicators.turnoverChange > 0 ? 'change-up' : 'change-down'">
									{{indicators.turnoverChange > 0 ? '+' : ''}}{{indicators.turnoverChange}}%
								</div>
							</div>
							<div class="indicator-item">
								<div class="indicator-label">价格波动率</div>
								<div class="indicator-value">{{indicators.volatility}}%</div>
								<div class="indicator-change" :class="indicators.volatilityChange > 0 ? 'change-up' : 'change-down'">
									{{indicators.volatilityChange > 0 ? '+' : ''}}{{indicators.volatilityChange}}%
								</div>
							</div>
						</div>
					</div>

					<!-- 市场快讯 -->
					<div class="market-card">
						<div class="card-title">
							<i class="el-icon-bell"></i>
							市场快讯
						</div>
						<div class="news-list">
							<div v-for="news in marketNews" :key="news.id" class="news-item">
								<div class="news-title">{{news.title}}</div>
								<div class="news-meta">
									<span class="news-tag">{{news.category}}</span>
									<span>{{news.time}}</span>
								</div>
							</div>
						</div>
					</div>

					<!-- 热门商品 -->
					<div class="market-card">
						<div class="card-title">
							<i class="el-icon-star-on"></i>
							热门批发商品
						</div>
						<div style="display: flex; flex-direction: column; gap: 12px;">
							<div v-for="(product, index) in hotProducts" :key="product.name" 
								style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #f8f9fa; border-radius: 6px;">
								<div style="display: flex; align-items: center; gap: 10px;">
									<span style="background: #667eea; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold;">
										{{index + 1}}
									</span>
									<span style="font-weight: 500;">{{product.name}}</span>
								</div>
								<div style="text-align: right;">
									<div style="font-weight: bold; color: #333;">¥{{product.price}}/公斤</div>
									<div style="font-size: 12px;" :class="'trend-' + product.trend">{{product.change}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					marketStats: {
						priceIndex: 108.5,
						priceChange: 2.3,
						activeMarkets: 156,
						marketGrowth: 8.5,
						dailyVolume: '2,850',
						volumeChange: -1.2,
						avgPrice: 12.8,
						avgPriceChange: 1.8
					},
					priceIndexes: [
						{category: '生鲜蔬菜', index: 112.3, dailyChange: '+2.1%', weeklyChange: '+5.8%', dailyTrend: {type: 'up', text: '上涨'}},
						{category: '水果类', index: 105.7, dailyChange: '+1.2%', weeklyChange: '+3.2%', dailyTrend: {type: 'up', text: '上涨'}},
						{category: '肉类冻品', index: 98.9, dailyChange: '-0.8%', weeklyChange: '-2.1%', dailyTrend: {type: 'down', text: '下跌'}},
						{category: '水产海鲜', index: 115.6, dailyChange: '+3.2%', weeklyChange: '+8.5%', dailyTrend: {type: 'up', text: '上涨'}},
						{category: '禽蛋类', index: 102.1, dailyChange: '0.0%', weeklyChange: '+1.5%', dailyTrend: {type: 'stable', text: '持平'}},
						{category: '乳制品', index: 107.8, dailyChange: '+1.5%', weeklyChange: '+4.2%', dailyTrend: {type: 'up', text: '上涨'}}
					],
					indicators: {
						suppliers: 1248,
						supplierGrowth: 12,
						newSources: 85,
						sourceGrowth: 18,
						turnoverRate: 3.2,
						turnoverChange: 8,
						volatility: 5.8,
						volatilityChange: -2
					},
					marketNews: [
						{id: 1, title: '华南地区蔬菜批发价格上涨，主要受天气影响', category: '价格动态', time: '2小时前'},
						{id: 2, title: '海鲜批发市场活跃度增加，进口产品需求旺盛', category: '市场动态', time: '4小时前'},
						{id: 3, title: '冷冻肉类价格回落，库存充足供应稳定', category: '价格动态', time: '6小时前'},
						{id: 4, title: '新批发商入驻平台，果蔬类货源增加', category: '平台动态', time: '8小时前'},
						{id: 5, title: '周末批发市场交易量环比增长15%', category: '交易数据', time: '1天前'},
						{id: 6, title: '春节前夕，冷链产品批发价格预期上涨', category: '市场预测', time: '1天前'}
					],
					hotProducts: [
						{name: '三文鱼', price: 45.8, change: '+8.2%', trend: 'up'},
						{name: '白菜', price: 2.3, change: '+15.6%', trend: 'up'},
						{name: '苹果', price: 8.9, change: '+5.1%', trend: 'up'},
						{name: '猪肉', price: 28.5, change: '-2.3%', trend: 'down'},
						{name: '鸡蛋', price: 9.8, change: '+1.2%', trend: 'up'}
					]
				}
			},
			methods: {
				initCharts() {
					this.initPriceChart();
					this.initVolumeChart();
				},
				
				initPriceChart() {
					const chart = echarts.init(document.getElementById('priceChart'));
					
					const dates = [];
					const vegetableData = [];
					const fruitData = [];
					const meatData = [];
					
					// 生成30天的模拟数据
					for (let i = 29; i >= 0; i--) {
						const date = new Date();
						date.setDate(date.getDate() - i);
						dates.push(date.getMonth() + 1 + '/' + date.getDate());
						
						vegetableData.push(Math.round((Math.random() * 20 + 100) * 10) / 10);
						fruitData.push(Math.round((Math.random() * 15 + 95) * 10) / 10);
						meatData.push(Math.round((Math.random() * 25 + 85) * 10) / 10);
					}
					
					const option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross'
							}
						},
						legend: {
							data: ['蔬菜指数', '水果指数', '肉类指数'],
							top: 10
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: dates,
							boundaryGap: false
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								formatter: '{value}'
							}
						},
						series: [
							{
								name: '蔬菜指数',
								type: 'line',
								data: vegetableData,
								smooth: true,
								lineStyle: {color: '#67C23A'},
								itemStyle: {color: '#67C23A'}
							},
							{
								name: '水果指数',
								type: 'line',
								data: fruitData,
								smooth: true,
								lineStyle: {color: '#E6A23C'},
								itemStyle: {color: '#E6A23C'}
							},
							{
								name: '肉类指数',
								type: 'line',
								data: meatData,
								smooth: true,
								lineStyle: {color: '#F56C6C'},
								itemStyle: {color: '#F56C6C'}
							}
						]
					};
					
					chart.setOption(option);
					window.addEventListener('resize', () => chart.resize());
				},
				
				initVolumeChart() {
					const chart = echarts.init(document.getElementById('volumeChart'));
					
					const option = {
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b}: {c} ({d}%)'
						},
						legend: {
							orient: 'vertical',
							left: 10,
							data: ['蔬菜类', '水果类', '肉类', '水产类', '其他']
						},
						series: [
							{
								name: '成交量分布',
								type: 'pie',
								radius: ['40%', '70%'],
								center: ['60%', '50%'],
								data: [
									{value: 1548, name: '蔬菜类'},
									{value: 735, name: '水果类'},
									{value: 580, name: '肉类'},
									{value: 484, name: '水产类'},
									{value: 300, name: '其他'}
								],
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					};
					
					chart.setOption(option);
					window.addEventListener('resize', () => chart.resize());
				},
				
				refreshData() {
					// 模拟数据刷新
					this.marketStats.priceIndex += (Math.random() - 0.5) * 2;
					this.marketStats.priceIndex = Math.round(this.marketStats.priceIndex * 10) / 10;
					
					this.$message.success('数据已更新');
				}
			},
			
			mounted() {
				this.$nextTick(() => {
					this.initCharts();
				});
				
				// 定时刷新数据
				setInterval(() => {
					this.refreshData();
				}, 300000); // 5分钟更新一次
			}
		});
	</script>
</body>
</html>